import QtQuick
import QtMultimedia

Rectangle {
    width: 1920
    height: 1080

    FontLoader {
        id: fontThin
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Thin.ttf"
    }

    FontLoader {
        id: fontLight
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Light.ttf"
    }

    FontLoader {
        id: fontRegular
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Regular.ttf"
    }

    FontLoader {
        id: fontMedium
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Medium.ttf"
    }

    FontLoader {
        id: fontBold
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Bold.ttf"
    }

    FontLoader {
        id: fontBlack
        source: "qrc:/assets/fonts/HarmonyOS_Sans_SC_Black.ttf"
    }

    BorderImage {
        id: borderImage
        anchors.fill: parent
        source: "qrc:/assets/images/background.png"

        Text {
            id: title
            x: 600
            y: 22
            width: 724
            height: 52
            color: "#66ffff"
            text: qsTr("车辆行驶监控")
            font.pixelSize: 44
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Black"
            font.weight: Font.Bold
        }

        Text {
            id: date_time
            x: 1532
            y: 28
            width: 356
            height: 40
            color: "#66ffff"
            text: backend.dateTime
            font.pixelSize: 32
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Image {
            id: parking_accuracy_image
            x: 195
            y: 147
            width: 104
            height: 104
            source: "qrc:/assets/images/parking_accuracy.png"
            fillMode: Image.PreserveAspectFit
        }

        Image {
            id: image1
            x: 626
            y: 147
            width: 104
            height: 104
            source: "qrc:/assets/images/control_mode.png"
            fillMode: Image.PreserveAspectFit
        }

        Image {
            id: image2
            x: 1058
            y: 147
            width: 104
            height: 104
            source: "qrc:/assets/images/positing.png"
            fillMode: Image.PreserveAspectFit
        }

        Image {
            id: image3
            x: 1489
            y: 147
            width: 104
            height: 104
            source: "qrc:/assets/images/code_board.png"
            fillMode: Image.PreserveAspectFit
        }

        Text {
            id: parking_accuracy
            x: 319
            y: 155
            width: 112
            height: 44
            color: "#66ffff"
            text: "未停稳"
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: vehicle_control_mode
            x: 750
            y: 155
            width: 112
            height: 44
            color: "#66ffff"
            text: "非控车"
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: positioning_status
            x: 1182
            y: 155
            width: 112
            height: 44
            color: "#66ffff"
            text: "有效"
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: code_plate_id
            x: 1613
            y: 155
            width: 112
            height: 44
            color: "#66ffff"
            text: "未识别"
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: text1
            x: 319
            y: 207
            width: 112
            height: 36
            color: "#66ffff"
            text: "停车精度(cm)"
            font.pixelSize: 28
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: text2
            x: 750
            y: 207
            width: 112
            height: 36
            color: "#66ffff"
            text: qsTr("控车模式")
            font.pixelSize: 28
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: text3
            x: 1182
            y: 207
            width: 112
            height: 36
            color: "#66ffff"
            text: qsTr("定位状态")
            font.pixelSize: 28
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: text4
            x: 1613
            y: 207
            width: 112
            height: 36
            color: "#66ffff"
            text: qsTr("标识牌")
            font.pixelSize: 28
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: text5
            x: 737
            y: 963
            width: 146
            height: 44
            color: "#66ffff"
            text: qsTr("当前速度")
            font.pixelSize: 36
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }

        Text {
            id: train_velocity
            x: 895
            y: 935
            width: 134
            height: 80
            color: "#66ffff"
            text: backend.velocity
            font.pixelSize: 72
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Black"
        }

        Text {
            id: text7
            x: 1041
            y: 965
            width: 108
            height: 44
            color: "#66ffff"
            text: qsTr("Km/h")
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
        }

        Rectangle {
            id: camera1_area
            x: 24
            y: 320
            width: 727
            height: 559
            color: "#00ffffff"
            border.width: 0

            BorderImage {
                id: camera1_frame
                anchors.fill: parent
                source: "qrc:/assets/images/video_frame.png"

                VideoOutput {
                    id: camera1
                    anchors.fill: parent
                    anchors.margins: 15
                    fillMode: VideoOutput.PreserveAspectFit
                }

                Component.onCompleted: {
                    backend.setCamera1VideoSink(camera1.videoSink);
                }
            }
        }

        Rectangle {
            id: camera2_area
            x: 1169
            y: 320
            width: 727
            height: 559
            color: "#00ffffff"
            border.width: 0
            BorderImage {
                id: camera2_frame
                anchors.fill: parent
                source: "qrc:/assets/images/video_frame.png"

                VideoOutput {
                    id: camera2
                    anchors.fill: parent
                    anchors.margins: 15
                    fillMode: VideoOutput.PreserveAspectFit
                }

                Component.onCompleted: {
                    backend.setCamera2VideoSink(camera2.videoSink);
                }
            }
        }

        Image {
            id: vehicle_schematic_diagram
            y: 695
            width: 160
            height: 168
            source: "qrc:/assets/images/vehicle_schematic_diagram.png"
            anchors.horizontalCenter: parent.horizontalCenter
            fillMode: Image.PreserveAspectFit
        }

        Rectangle {
            id: front_status
            x: 889
            y: 394
            width: 142
            height: 352
            color: "#00ffffff"

            Image {
                id: front_status_image
                anchors.fill: parent
                verticalAlignment: Image.AlignBottom
                source: "qrc:/assets/images/front_status.png"
                fillMode: Image.Stretch
            }
        }

        Text {
            id: visual_distance
            x: 895
            y: 306
            width: 134
            height: 80
            color: "#30a46c"
            text: "300"
            font.pixelSize: 72
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Black"
        }

        Text {
            id: text8
            x: 1037
            y: 325
            width: 108
            height: 68
            color: "#30a46c"
            text: qsTr("m")
            font.pixelSize: 36
            verticalAlignment: Text.AlignVCenter
            font.family: "HarmonyOS Sans SC Medium"
        }
    }
}
